<template>
  <div class="check-page">
    <checkheader title="起止时间" @fatherMethod="fatherMethod"></checkheader>
    <div class="muicontent">
      <div class="check-time">
        <p>开始时间</p>
        <input type="text" readonly='readonly' v-model="datetime" @click="openPicker" />
        <div class="datePicker">
          <nut-datepicker
            :is-visible="isVisible"
            title="请选择日期"
            type="date"
            startDate="2000-01-01"
            endDate="2050-12-30"
            :defaultValue='defaultTime'
            @close="switchPicker('isVisible')"
            @choose="setChooseValue"
          ></nut-datepicker>
        </div>
        <p class="search-time">结束时间</p>
        <input type="text" readonly='readonly' v-model="datetime1" @click="openPicker1" />
        <div class="datePicker">
          <nut-datepicker
            :is-visible="isVisible1"
            title="请选择日期"
            type="date"
            startDate="2000-01-01"
            endDate="2050-12-30"
            :defaultValue='defaultTime'
            @close="switchPicker('isVisible1')"
            @choose="setChooseValue1"
          ></nut-datepicker>
        </div>
      </div>
    </div>
    <checkfoot @resetTime="resetTime" @confirmTime="confirmTime"></checkfoot>
  </div>
</template>

<script>
import checkheader from './checkHeader'
import checkfoot from './checkFoot'
export default {
  name: 'timeSearch',
  data () {
    return {
      isVisible: false,
      isVisible1: false,
      defaultTime: new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth() + 1) + '-' + this.timeFormat(new Date().getDate()),
      datetime: new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth()) + '-' + this.timeFormat(new Date().getDate()),
      datetime1: new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth() + 1) + '-' + this.timeFormat(new Date().getDate())
    }
  },
  methods: {
    fatherMethod () {
      // 给头部传递返回上我的账本的方法
      this.$router.push({ name: 'mycheck' })
    },
    timeFormat (num) {
      if (num < 10) { return '0' + num }
      return num
    },
    switchPicker (param) {
      // 传递过来的是哪个时间框
      this[`${param}`] = !this[`${param}`]
    },
    setChooseValue (param) {
      // 赋值第一个input时间
      this.datetime = param[3]
      this.datetime1 = ''
    },
    openPicker () {
      // 显示隐藏时间日期弹框
      this.isVisible = !this.isVisible
    },
    setChooseValue1 (param) {
      // 赋值第二个input时间
      this.datetime1 = param[3]
    },
    openPicker1 () {
      // 显示隐藏时间日期弹框
      this.isVisible1 = !this.isVisible1
    },
    resetTime () {
      // 重置时间
      this.datetime = new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth()) + '-' + this.timeFormat(new Date().getDate())
      this.datetime1 = new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth() + 1) + '-' + this.timeFormat(new Date().getDate())
    },
    confirmTime () {
      // 确定
      console.log('确定')
      this.$router.push({ name: 'mycheck', query: { datetime: this.datetime, datetime1: this.datetime1 } })
    }
  },
  components: {
    checkheader,
    checkfoot
  },
  watch: {}
}
</script>

<style lang="stylus" scoped>
.muicontent {
  position: absolute;
  top: 0.9rem;
  bottom: 0rem;
  left: 0;
  right: 0;
  overflow-y: auto;

  .check-time {
    border-top: 0.01rem solid $color-content-border;
    padding: 0.4rem 0.3rem 0rem 0.3rem;

    p {
      font-size: 0.24rem;
      color: $color-search-text;
      margin-bottom: 0.2rem;
    }

    .search-time {
      padding-top: 0.2rem;
    }

    .choice-time {
      height: 1rem;
    }

    input {
      background-color: $color-input;
      width: 100%;
      height: 0.7rem;
      margin: 0.3rem 0 0.4rem;
      text-align: center;
      font-size: 0.26rem;
      color: $color-text;
    }
  }
}
</style>
